<script setup lang="ts">
import {ref} from "vue";

const fileList = ref()
const handlerResponse = (response) => {
  console.log(response)
  fileList.value = "data:image/jpeg;base64," + response.response
}

</script>

<template>
  <div id="identifyView">
    <div class="upload">
      <a-upload @success="handlerResponse" draggable action="http://localhost:5000/identify" name="image"/>
    </div>
    <div class="preview">
      <a-image
          width="600"
          height="600"
          :src="fileList"
          alt="上传图片进行识别，此处展示识别结果"
      >
        <template #error-icon>
          <icon-question-circle />
        </template>
      </a-image>
    </div>
  </div>
</template>

<style scoped>
#identifyView {
  display: grid;
  width: 100vw;
  height: 100vh;
}

.upload {
  grid-area: 1 / 1 / 2 / 2;
}

.preview {
  text-align: center;
}
</style>
